import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit";
import { useHistory } from "react-router";
import axios from "axios";
// import cookie from "react-cookies";
interface UserState {
  show: boolean;
  loading: boolean;
  error: string | null;
  token: string | null;
  isLogin: boolean;
  data: any;
  phoneNumber: any;
  psd: any;
  type: any;
  qcode: any;
  registerName: any;
  canGetQcode: boolean;
  exist?: number;
  time: any;
}

const initialState: UserState = {
  show: false,
  loading: false,
  error: null,
  token: null,
  isLogin: false,
  data: undefined,
  phoneNumber: "",
  psd: "",
  type: "login",
  qcode: "",
  registerName: "",
  canGetQcode: true,
  exist: -1,
  time: "",
};

export const signIn = createAsyncThunk(
  "user/signIn",
  async (
    paramaters: {
      phone: string;
      password: string;
    },
    thunkAPI
  ) => {
    // const history = useHistory();
    // console.log(paramaters);

    const { data } = await axios.post(
      `http://localhost:3000/login/cellphone?phone=${paramaters.phone}&password=${paramaters.password}`
      // {
      //   email: paramaters.phone,
      //   password: paramaters.password,
      // }
    );
    // history.goBack();
    return data;
  }
);

export const getQcode = createAsyncThunk(
  "user/getQcode",
  async (
    paramaters: {
      phone: string;
    },
    thunkAPI
  ) => {
    // const history = useHistory();
    // console.log(paramaters);

    const { data } = await axios.post(
      `http://localhost:3000/captcha/sent?phone=${paramaters.phone}`
      // {
      //   email: paramaters.phone,
      //   password: paramaters.password,
      // }
    );
    // history.goBack();
    return data;
  }
);
export const check = createAsyncThunk(
  "user/check",
  async (
    paramaters: {
      phone: string;
    },
    thunkAPI
  ) => {
    // const history = useHistory();
    // console.log(paramaters);

    const { data } = await axios.get(
      `http://localhost:3000/cellphone/existence/check?phone=${paramaters.phone}`
      // {
      //   email: paramaters.phone,
      //   password: paramaters.password,
      // }
    );
    // history.goBack();
    return data;
  }
);

export const register = createAsyncThunk(
  "user/register",
  async (
    paramaters: {
      phone: string;
      password: string;
      captcha: string;
      nickname: string;
    },
    thunkAPI
  ) => {
    // const history = useHistory();
    // console.log(paramaters);

    const { data } = await axios.get(
      `http://localhost:3000/register/cellphone?
      phone=${paramaters.phone}
      &password=${paramaters.password}
      &captcha=${paramaters.captcha}
      &nickname=${paramaters.nickname}`
    );
    // history.goBack();
    return data;
  }
);

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    // logOut: (state) => {
    //   state.token = null;
    //   state.error = null;
    //   state.loading = false;
    // },
    init: (s, a) => {
      s.canGetQcode = a.payload.canGetQcode;
      s.exist = a.payload.exist;
      s.phoneNumber = a.payload.phoneNumber;
      s.qcode = a.payload.qcode;
      s.type = a.payload.type;
      s.psd = a.payload.psd;
    },
    canGetQcode: (s, a) => {
      s.canGetQcode = a.payload;
    },
    changeRegisterName: (s, a) => {
      s.registerName = a.payload;
    },
    changeQcode: (s, a) => {
      s.qcode = a.payload;
    },
    changeType: (s, a) => {
      s.type = a.payload;
    },
    changeData: (state, action) => {
      state.data = action.payload;
    },
    showLogin: (state, action) => {
      state.show = action.payload;
    },
    isLogin: (state, action) => {
      state.isLogin = action.payload;
    },
    changePhone: (state, action) => {
      state.phoneNumber = action.payload;
    },
    changePsd: (state, action) => {
      state.psd = action.payload;
    },
    getTimeCountDown: (s, a) => {
      s.time = a.payload;
    },
  },
  extraReducers: {
    [signIn.pending.type]: (state) => {
      state.loading = true;
    },
    [signIn.fulfilled.type]: (state, action) => {
      localStorage.setItem("token", action.payload["token"]);
      localStorage.setItem("cookie", action.payload["cookie"]);
      localStorage.setItem("data", JSON.stringify(action.payload["profile"]));
      state.data = action.payload;
      state.loading = false;
      state.error = null;
    },
    [signIn.rejected.type]: (state, action: PayloadAction<string | null>) => {
      state.loading = false;
      state.error = action.payload;
    },
    [check.pending.type]: (state) => {
      state.loading = true;
    },
    [check.fulfilled.type]: (state, action) => {
      state.exist = action.payload["exist"];
      state.loading = false;
      state.error = null;
      if (action.payload["exist"] === 1) {
        state.canGetQcode = true;
      }
    },
    [check.rejected.type]: (state, action: PayloadAction<string | null>) => {
      state.loading = false;
      state.error = action.payload;
    },
  },
});
